<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Beehive</title>
    <!-- webkit内核，默认用急速核-->
    <meta name="renderer" content="webkit">
    <!-- IE使用最高模式渲染，强制IE使用chrome frame渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        #img {
            position: absolute;
            top: 120px;
            left: 800px;
        }

        .upload {
            width: 240px;
            height: 37px;
            border: 1px solid #e6e6e6;
            border-radius: 2px;

        }

        /* layui的下拉框 */
        .layui-anim-upbit {
            width: 240px;
        }

    </style>
</head>
<body>

<div class="layui-fluid">

    <!-- 面包屑导航 -->
    <span class="layui-breadcrumb">
        <blockquote class="layui-elem-quote">
            <a th:href="@{/admin}" target="_parent">首页</a>
            <a href="#" target="_self">图书管理</a>
            <a><cite th:text="${book !=null}?'修改图书': '单本上传'">单本上传</cite></a>
        </blockquote>
    </span>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend th:text="${book !=null}?'修改电子书': '添加电子书'">添加电子书</legend>
    </fieldset>
    <form class="layui-form">
        <input type="hidden" id="bookId" th:if="${book !=null}" th:value="${book.id}">
        <div class="layui-inline">
            <label class="layui-form-label"><span style="color: red" th:if="${book == null}">*</span>书名</label>
            <div class="layui-input-inline" style="width: 240px">
                <input type="text" id="title" placeholder="请输入书名" class="layui-input" required th:value="${book !=null}?${book.title}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline" style="width: 240px">
                <input type="text" id="author" placeholder="请输入作者" class="layui-input" required th:value="${book !=null}?${book.author}">
            </div>
        </div>
        <img class="layui-upload-img" id="img" width="280px" height="280px" th:src="${book ==null}?@{/img/blank.png}:${#strings.replace(book.img,'d:/bms/book','/path')} ">

        <div style="margin-top: 20px">
            <div class="layui-inline">
                <label class="layui-form-label">年月</label>
                <div class="layui-input-inline" style="width: 240px">
                    <input type="text" class="layui-input" id="pressTime" placeholder="请选择出版日期" required th:value="${book !=null}?${book.pressTime}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">类别</label>
                <div class="layui-input-inline" style="width: 240px">
                    <select id="category" name="category" style="width: 240px">
                        <option value=""></option>
                        <option th:selected="${book !=null}?${book.categoryId == item.id}"
                                th:each="item : ${items}"
                                th:value="${item.id}"
                                th:text="${item.title} + ' ' + ${item.type}"></option>
                    </select>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px">
            <div class="layui-inline">
                <label class="layui-form-label">出版</label>
                <div class="layui-input-inline" style="width: 240px">
                    <input type="text" id="press" placeholder="输入出版社 [可选]" class="layui-input" th:value="${book !=null}?${book.press}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">主题</label>
                <div class="layui-input-inline" style="width: 240px">
                    <select id="keyword" name="keyword" style="width: 240px">
                        <option value=""></option>
                        <option th:selected="${book !=null}?${book.themeId == theme.id}"
                                th:each="theme : ${themes}"
                                th:value="${theme.id}"
                                th:text="${theme.name}"></option>
                    </select>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">简介</label>
                <div class="layui-input-block" style="width: 594px">
                    <textarea id="desc" name="desc" placeholder="请输入图书的内容简介" class="layui-textarea" th:text="${book !=null}?${book.description}"></textarea>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px">
            <div class="layui-inline">
                <label class="layui-form-label">封面</label>
                <div class="layui-input-inline upload" style="width: 240px">
                    <span style="line-height: 40px; margin-left: 10px; color: #7d7d7d">[可选]</span>
                    <button type="button" class="layui-btn" id="uploadImg" th:text="${book != null} ? '修改封面' : '上传封面'"
                            style="float: right; background-color: #21a675"><i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">文件</label>
                <div class="layui-input-inline upload" style="width: 240px">
                    <span style="line-height: 40px; margin-left: 10px; color: #7d7d7d">[可选]</span>
                    <button type="button" class="layui-btn" id="uploadPdf" th:text="${book!=null}?'修改文件' : '上传文件'"
                            style="float: right; background-color: #21a675"><i class="layui-icon">&#xe67c;</i>上传文件
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-inline" style="margin-top: 40px; margin-left: 300px">
            <div id="submitBtn" class="layui-btn layui-btn-normal" style="margin-right: 14px" th:if="${book == null}">提交</div>
            <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn" style="margin-right: 14px" th:if="${book == null}">重置</button>
            <div id="modifyBtn" class="layui-btn layui-btn-normal" style="margin-right: 14px" th:if="${book != null}">修改</div>
            <a th:href="@{/admin/bookList}" class="layui-btn layui-btn-primary" th:if="${book != null}">取消</a>
        </div>
    </form>
</div>

<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/uploadSingle.js}" charset="utf-8"></script>

</body>
</html>